<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box1{
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
        }
        .box1 ul li{
            list-style: none;
            display: inline-block;
            width: 100px;
            line-height: 40px;
            text-align: center;
        }
        .box1 ul li:hover{
            background-color: #00619f;
        }
        .box1 ul li a{
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-family: "雅黑";
        }
        .box2{
            width: 958px;
            height: 266px;
            border: 1px solid gray;
            position: relative;
            left: 10px;
        }
        .box2_1{
            width: 920px;
            height: 50px;
            border-bottom: 1px solid gray;
            position: relative;
            left: 20px;
        }
        h2{
            font-size: 18px;
            font-family: "雅黑";
            color: #000000;
            padding-top: 7px;
        }
        .box2_2{
            width: 100%;
            height: 199px;
            /* border: 1px solid gray; */
            position: relative;
            
            
        }
        .box2_2 ul li{
            list-style: none;
            display: inline-block;
            width: 160px;
            height: 68px;
            margin: 27px 5px -2px 5px;
            padding-right: 9px;
            position: relative;
            left: 25px;
            
        }
       .box3{
           width: 600px;
           height: 290px;
           border: 1px solid gray;
           position: relative;
           left: 10px;
           font-size: 14px;
           font-family: "雅黑";
           color: #000;
       }
       .box3_1{
           width: 560px;
           height: 50px;
           border-bottom: 1px solid gray;
           position: relative;
           left: 21px;
       }
       .box3_2{
            width: 560px;
            height: 240px;
            /* border-bottom: 1px solid gray; */
            position: relative;
            left: 21px;
       }
       .box3_1 h3{
           font-size: 18px;
           font-family: "雅黑";
           color: #000;
           line-height: 50px;
           display: inline-block;

       }
       .box3_2_2 ul li{
           list-style: none;
       }
       .box3_2_1{
           position: relative;
           left: 20px;
           margin: 10px 0px 10px 0px;
           line-height: 37px;
       }
       .box3_2_2{
           position: relative;
           left: 483px;
           margin: 10px 0px 10px 0px;
           line-height: 37px;
           top: -230px;
           
       }
       .box3_1 a{
           color: gray;
           position: relative;
           float: right;
           top: 15px;
       }
       .box4{
           width: 498px;
           height: 343px;
           border: 1px solid red;
           position: relative;
           left: 10px;
       }
       .box4_1{
           width: 100%;
           height: 67px;
           /* border: 1px solid black; */
           position: relative;

       }
       .box4_2{
           width: 212px;
           height: 239px;
           /* border: 1px solid green; */
           float: left;
           position: relative;
           left: 20px;
       }
       .box4_3{
           width: 211px;
           height: 239px;
           /* border: 1px solid blue; */
           float: right;
           position: relative;
           right: 30px;
       }
       .box4_1_1{
           width: 5px;
           height: 20px;
           background-color: red;
           margin: 30px 0 0 20px;
           display: inline-block;
       }
       .box4_1 h2{
           display: inline-block;
           line-height: 67px;
           top: -4px;
           position: relative;
       }
       .box4_3_1{
           width: 211px;
           height: 142px;
           /* border: 1px solid black; */
       }
       .box4_3_2{
           width: 211px;
           height: 97px;
           /* border: 1px solid black; */
       }
       .box4_3_1 div{
           width: 90px;
           height: 97px;
           float: left;
           margin-left: 6px;
           
       }
       .box4_3_1 h4{
           margin: 108px 0 0 19px;
       }
       .box4_3_2_12{
           width: 102px;
           height: 47px;
           border: 1px dotted gray;
           margin-left: -1px;
           display: inline-block;
           
       }
       .box4_3_2_12 a{
           text-align: center;
           line-height: 48px;
           position: relative;
           left: 19px;
       }
    </style>
</head>
<body>
    <!-- 第三题 -->
    <div class="box1">
        <ul>
            <li><a href="#">首&nbsp;&nbsp;页</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">网站建设</a></li>
        </ul>
    </div>
    <br><br><br>
    <!-- 第四题 -->
    <div class="box2">
        <div class="box2_1">
            <h2>图片展示</h2>
        </div>
        <div class="box2_2">
            <ul>
            <li><img src="../img/goods.jpg" ></li>
            <li><img src="../img/goods.jpg" ></li>
            <li><img src="../img/goods.jpg" ></li>
            <li><img src="../img/goods.jpg" ></li>
            <li><img src="../img/goods.jpg" ></li>
            </ul>
            <ul>
                <li><img src="../img/goods.jpg" ></li>
                <li><img src="../img/goods.jpg" ></li>
                <li><img src="../img/goods.jpg" ></li>
                <li><img src="../img/goods.jpg" ></li>
                <li><img src="../img/goods.jpg" ></li>
            </ul>
        </div>
        
    </div><br><br><br>
    <!--  第五题 -->
    <div class="box3">
        <div class="box3_1">
            <h3>新闻列表</h3>
        </div>
        <div class="box3_2">
            <div class="box3_2_1">
                 <ul>
                <li><a>郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a>郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a>郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a>郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a>郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a>郑州挣钱郑州花，一分别想带回家。</a></li>
            </ul>
            </div>
           <div class="box3_2_2">
               <ul>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
               </ul>
           </div>
        </div>
    </div><br><br><br>
    
    <!-- 第六题 -->
    <div class="box3">
        <div class="box3_1">
            <h3>新闻列表</h3>
            <a>更多>></a>
        </div>
        <div class="box3_2">
            <div class="box3_2_1">
                 <ul>
                <li><a><img src="../img/icon.jpg" >郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a><img src="../img/icon.jpg" >郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a><img src="../img/icon.jpg" >郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a><img src="../img/icon.jpg" >郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a><img src="../img/icon.jpg" >郑州挣钱郑州花，一分别想带回家。</a></li>
                <li><a><img src="../img/icon.jpg" >郑州挣钱郑州花，一分别想带回家。</a></li>
            </ul>
            </div>
           <div class="box3_2_2">
               <ul>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
                   <li><a>2020.9.12</a></li>
               </ul>
           </div>
        </div>
    </div><br><br><br>
    <!--  第七题 -->
    <div class="box4">
        <div class="box4_1">
            <div class="box4_1_1"></div>
            <h2>淘宝女装</h2>
        </div>
        <div class="box4_2">
            <img src="../img/nv_left_big.jpg"  style="width: 100%; height: 100%;">
        </div>
        <div class="box4_3">
            <div class="box4_3_1">
                <div>
                    <div><img src="../img/nv_small_01.jpg" style="width: 100%; height: 100%;">
                    </div>
                    <h4>新款毛衣</h4>
                </div>
                <div>
                    <div><img src="../img/nv_small_01.jpg" style="width: 100%; height: 100%;">
                    </div>
                    <h4>新款毛衣</h4>
                </div>
            </div>
            <div class="box4_3_2">
                <div class="box4_3_2_12"><a>新品上市</a></div>
                <div class="box4_3_2_12"><a>新品上市</a></div>
                <div class="box4_3_2_12"><a>新品上市</a></div>
                <div class="box4_3_2_12"><a>新品上市</a></div>
            </div>
        </div>

    </div>
</body>
</html>